<template>
  <div>
    <t-float-button
      @click="onClick"
      v-if="chatShow"
    >
      <template #default>
        <img
          :src="RebootSvg"
          style="width: 45px; height: 45px"
        />
      </template>
    </t-float-button>
    <el-dialog
      v-model="dialogVisible"
      width="800"
      class="ai-gen-dialog"
      :show-close="false"
    >
      <ai-gen
        class="ai-gen-wrap"
        @submit="dialogVisible = false"
      />
      <template #footer>
        <div class="dialog-footer mb10 mr10 mt10">
          <el-button
            size="default"
            @click="dialogVisible = false"
          >
            关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from "vue";
import AiGen from "@/views/ai/form/AiGen.vue";
import RebootSvg from "@/views/ai/chat/icon/reboot.svg";
import TFloatButton from "@/views/ai/form/TFloatButton.vue";
import { aiChatIsOpenRequest } from "@/api/project/ai";

const onClick = () => {
  dialogVisible.value = true;
};

const chatShow = ref(false);

onBeforeMount(() => {
  aiChatIsOpenRequest().then(res => {
    if (res.data) {
      chatShow.value = true;
    }
  });
});

const dialogVisible = ref(false);
</script>
<style lang="scss" scoped>
.ai-gen-wrap {
  border-bottom: var(--el-border);
}
</style>

<style lang="scss">
.ai-gen-dialog {
  --el-dialog-padding-primary: 0px !important;
}
</style>
